<template>
    <div>
        <el-row>
            <el-col :span="24">
                <div class="grid-content bg-purple-dark">
                    <div class="time">
                        <span style="font-size: 55px; float:left; text-shadow: 0px 2px 7px rgba(51, 51, 51, 0.2);">{{
                                nnow
                        }}</span>
                        <span style="font-size: 16px; display:inline-block; margin-top:10px; padding-left:10px"> {{
                                ndate
                        }} </span>
                        <br>
                        <span style="font-size: 16px; display:inline-block; margin-top:5px; padding-left:10px">星期{{
                                nweek
                        }}</span>
                        <!-- <span style="font-size: 50px;  text-shadow: 0px 2px 7px rgba(51, 51, 51, 0.2); margin-left: 400px;"> 莱尼尔办公室</span> -->
                    </div>
                </div>
            </el-col>
        </el-row>
        <!-- 第一行表格 -->
        <el-row>
            <!-- 表格 -->
            <el-col :span="24">
                <div class="grid-content bg-purple">
                    <el-table :data="tableDate"
                        :header-cell-style="{ textAlign: 'center', backgroundColor: '#409EFF', color: 'white' }" border
                        style="width: 90% ;margin:0 auto; margin-top: 160px;" :cell-style="{ textAlign: 'center' }">
                        <!-- :header-cell-style="{ background: '#6eaef5', color: '#ffffff' }" -->
                        <el-table-column prop="emA" label="电流 (A)">
                        </el-table-column>
                        <el-table-column prop="emU" label="电压 (V)">
                        </el-table-column>
                        <el-table-column prop="emActivePower" label="有功功率 (W)">
                        </el-table-column>
                        <el-table-column prop="emPowerFactor" label="功率因数 (COS)">
                        </el-table-column>
                        <el-table-column prop="emFrequency" label="频率 (Hz)">
                        </el-table-column>
                        <el-table-column prop="emActiveElectricity" label="总有功功率 (W)">
                        </el-table-column>
                        <el-table-column prop="emState" label="拉合闸状态">{{ emState == '0' ? '合闸' : '拉闸' }}
                        </el-table-column>
                        <el-table-column prop="recordTime" label="时间">
                        </el-table-column>
                    </el-table>
                </div>
            </el-col>

        </el-row>
        <el-row>
            <!-- 第二行查询 -->
            <el-col :span="24">
                <div class="grid-content bg-purple-dark">
                    <div class="block">
                        <el-date-picker clearable value-format="yyyy/MM/dd" v-model="selectTime" type="date"
                            placeholder="选择日期" :picker-options="expireTimeOPtion">
                        </el-date-picker>
                        <el-button type="primary" icon="el-icon-search" style="margin-left: 20px" @click="getL">查询
                        </el-button>
                    </div>
                </div>
            </el-col>
        </el-row>
        <!-- 第三行电表 -->
        <p style="text-align:center; font-size:30px">莱尼尔办公室电流、总有功功率变化曲线图</p>
        <el-row>
            <div style="margin-top:100px">
                <el-col :span="12">
                    <!-- 86盒湿度  状态表格 -->
                    <el-table :data="tableData1" border
                        :header-cell-style="{ textAlign: 'center', background: '#6eaef5', color: '#ffffff' }"
                        :cell-style="{ textAlign: 'center' }" style="width: 40%; margin:50px auto;"
                        :row-class-name="tableRowClassName">
                        <el-table-column prop="limitName" label="设备名称">
                        </el-table-column>
                        <el-table-column prop="deviceState" label="设备状态">
                        </el-table-column>
                    </el-table>
                    <div class="grid-content bg-purple">
                        <div id="louver" style="width: 90%;height:400px;margin: auto;padding-left: 40px;   "></div>
                    </div>
                </el-col>
                <el-col :span="12">
                    <!-- 86盒湿度  状态表格 -->
                    <el-table :data="tableData2" border
                        :header-cell-style="{ textAlign: 'center', background: '#6eaef5', color: '#ffffff' }"
                        :cell-style="{ textAlign: 'center' }" style="width: 40%; margin:50px auto;"
                        :row-class-name="tableRowClassName">
                        <el-table-column prop="limitName" label="设备名称">
                        </el-table-column>
                        <el-table-column prop="deviceState" label="设备状态">
                        </el-table-column>
                    </el-table>
                    <div class="grid-content bg-purple-light">
                        <div id="louver1" style="width: 90%;height:400px; "></div>
                    </div>
                </el-col>
            </div>
        </el-row>
        <!-- 第四行光照 -->
        <p style="text-align:center; font-size:30px">百叶箱采集光照变化曲线图</p>
        <el-row>
            <el-col :span="24">
                <!-- pt100温度  状态表格 -->
                <el-table :data="tableData3" border
                    :header-cell-style="{ textAlign: 'center', background: '#6eaef5', color: '#ffffff' }"
                    :cell-style="{ textAlign: 'center' }" style="width: 40%; margin:50px auto;"
                    :row-class-name="tableRowClassName">
                    <el-table-column prop="limitName" label="设备名称">
                    </el-table-column>
                    <el-table-column prop="deviceState" label="设备状态">
                    </el-table-column>
                </el-table>
                <div class="grid-content bg-purple">
                    <div id="ele" ref="elel" style="width: 100%;height:400px;  "></div>
                </div>
            </el-col>

        </el-row>
    </div>
</template>

<script>
import * as echarts from 'echarts';
import { getelectricityList, getelectricityData, getlouverIlluminationList, getStateList } from '@/api/system/office.js'

export default {
    data() {
        return {
            tableData1: [],
            tableData2: [],
            tableData3: [],
            tableDate: [],
            selectTime: this.getNowTime(),
            // selectTime:'2022/11/13',
            emState: 1,
            nowTime: '',
            newTime: "",
            nowTime: '',
            ndate: '',
            nnow: '',
            nweek: '',
            expireTimeOPtion: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                }
            },


        }
    },
    mounted() {
        this.getLight()
        this.getEle()
        this.getEleDate()
        this.getTimeNow()
        this.State()
        clearInterval(myTimeDisplay, MyState);
        var myTimeDisplay = setInterval(() => {
            this.getTimeNow();
            //每秒更新一次时间
        }, 1000);
        var MyState = setInterval(() => {
            this.State()
            //每秒更新一次时间
        }, 600000);

    },
    methods: {
        //    查询按钮使用
        getL() {
            this.getLight()
            this.getEle()
            // this.getEleDate()
        },
        // 百叶箱采集光照
        getLight() {
            getlouverIlluminationList(this.selectTime).then(res => {
                // console.log(res);
                // console.log(this.selectTime);
                // var chartTp1 = document.getElementById('ele');

                // var myCharttp1 = echarts.init(chartTp1);
                let myCharttp1 = echarts.init(this.$refs.elel);
                if (myCharttp1 == null) // 如果不存在则创建
                {
                    myCharttp1 = echarts.init(this.$refs.elel)
                }
                let option = {
                    // backgroundColor: 'rgba(250, 251, 252, 1)',
                    visualMap: [
                        {
                            show: false,
                            type: 'continuous',
                            seriesIndex: 0,
                            min: 0,
                            max: 400
                        },
                    ],
                    // 图表标题
                    title: {
                        // text: '百叶箱采集光照',
                        // // left: 'center',
                        // top:'10%'


                    },
                    tooltip: { // 鼠标悬浮提示框显示 X和Y 轴数据
                        trigger: 'axis',
                        axisPointer: {
                            // 坐标轴虚线
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        },
                        // backgroundColor: 'rgba(32, 33, 36,.7)',
                        // borderColor: 'rgba(32, 33, 36,0.20)',
                        // borderWidth: 1,
                        // // 文字提示样式
                        // color: '#fff',
                        // fontSize: '12',


                    },

                    // 维度
                    legend: {
                        orient: 'vertical',
                        data: ['光照(LX)'],

                    },
                    // x轴
                    xAxis: {
                        data: res.data[1]
                    },
                    // y轴
                    yAxis: {

                    },
                    grid: [
                        {
                            top: '20%',
                            bottom: '30%'
                        },
                    ],
                    series: [{
                        // 与标题一致
                        name: '光照(LX)',
                        // 图表类型
                        type: 'line',
                        // showSymbol: false,
                        //   markLine: {
                        //   data: [{ type: "average", name: "Avg" }],
                        // },
                        markPoint: {
                            data: [
                                { type: "max", name: "Max" },
                                { type: "min", name: "Min" },
                            ],
                        },
                        //数据内容 
                        data: res.data[0],
                        label: {
                            color: 'black',

                            formatter: function (params) {
                                return (params.value)
                            },
                            // show: true // 在折线拐点上显示数据
                        },
                        lineStyle: {
                            //  normal : {
                            //     color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                            //       offset: 0,
                            //       color: '#ad91ed'
                            //     },
                            //     {
                            //       offset: 0.9,
                            //       color: '#c8eeeb'
                            //     }]),
                            //     areaStyle: {

                            //       type: 'default'
                            //     }
                            //   }
                        },

                    }],
                    // 使用刚指定的配置项和数据显示图表。

                };

                // myChart.setOption(option);

                window.onresize = myCharttp1.resize
                option && myCharttp1.setOption(option);
            })
            // this.selectTime=''
        },
        getEle() {
            getelectricityList(this.selectTime).then(res => {

                // console.log(res);
                var chartDom = document.getElementById('louver');
                var chartDom1 = document.getElementById('louver1');
                var myChart = echarts.init(chartDom);
                var myChart1 = echarts.init(chartDom1);
                let option = {
                    // backgroundColor: 'rgba(250, 251, 252, 1)',
                    visualMap: [
                        {
                            show: false,
                            type: 'continuous',
                            seriesIndex: 0,
                            min: 0,
                            max: 400
                        },
                    ],
                    // 图表标题
                    title: {
                        // text: '当日温度变化曲线图',
                        // left: 'center',


                    },
                    tooltip: { // 鼠标悬浮提示框显示 X和Y 轴数据
                        trigger: 'axis',
                        axisPointer: {
                            // 坐标轴虚线
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        },
                        // backgroundColor: 'rgba(32, 33, 36,.7)',
                        // borderColor: 'rgba(32, 33, 36,0.20)',
                        // borderWidth: 1,
                        // // 文字提示样式
                        // color: '#fff',
                        // fontSize: '12',


                    },

                    // 维度
                    legend: {
                        orient: 'vertical',
                        data: ['电流(A)'],

                    },
                    // x轴
                    xAxis: {
                        data: res.data[2]
                    },
                    // y轴
                    yAxis: {

                    },
                    grid: [
                        {
                            top: '20%',
                            bottom: '30%'
                        },
                    ],
                    series: [{
                        // 与标题一致
                        name: '电流(A)',
                        // 图表类型
                        type: 'line',
                        // showSymbol: false,
                        //   markLine: {
                        //   data: [{ type: "average", name: "Avg" }],
                        // },
                        markPoint: {
                            data: [
                                { type: "max", name: "Max" },
                                { type: "min", name: "Min" },
                            ],
                        },
                        //数据内容 
                        data: res.data[0],
                        label: {
                            color: 'black',

                            formatter: function (params) {
                                return (params.value)
                            },
                            // show: true // 在折线拐点上显示数据
                        },
                        lineStyle: {
                            //  normal : {
                            //     color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                            //       offset: 0,
                            //       color: '#ad91ed'
                            //     },
                            //     {
                            //       offset: 0.9,
                            //       color: '#c8eeeb'
                            //     }]),
                            //     areaStyle: {

                            //       type: 'default'
                            //     }
                            //   }
                        },

                    }],
                    // 使用刚指定的配置项和数据显示图表。

                };
                let option1 = {
                    // backgroundColor: 'rgba(250, 251, 252, 1)',
                    visualMap: [
                        {
                            show: false,
                            type: 'continuous',
                            seriesIndex: 0,
                            min: 0,
                            max: 400
                        },
                    ],
                    // 图表标题
                    title: {
                        // text: '当日湿度变化曲线图',
                        // left: 'center',
                    },
                    tooltip: {
                        trigger: "axis",
                        axisPointer: {
                            type: "cross",
                            label: {
                                backgroundColor: "#6a7985",
                            },
                        },
                    },
                    // 维度
                    legend: {
                        orient: 'vertical',
                        // x:'70',
                        // y:'50',
                        data: ['总有功功率(W)'],

                    },
                    // x轴
                    xAxis: {
                        data: res.data[2]
                    },
                    // y轴
                    yAxis: {

                    },
                    grid: [
                        {

                            top: '20%',
                            bottom: '30%'
                        },
                    ],
                    series: [{
                        // 与标题一致
                        name: '总有功功率(W)',
                        // 图表类型
                        type: 'line',
                        // showSymbol: false,
                        // 平均的线
                        //   markLine: {
                        //   data: [{ type: "average", name: "Avg" }],
                        // },
                        // 最大最小值高亮
                        markPoint: {
                            data: [
                                { type: "max", name: "Max" },
                                { type: "min", name: "Min" },
                            ],
                        },
                        //数据内容 
                        data: res.data[1],
                        label: {

                            color: 'black',
                            formatter: function (params) {
                                return (params.value)
                            },
                            // show: true // 在折线拐点上显示数据
                        },
                        lineStyle: {
                            // normal: {

                            //   color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                            //     offset: 0,
                            //     color: '#2FE0D4'
                            //   },
                            //   {
                            //     offset: 0.9,
                            //     color: '#c37fee'
                            //   }]),
                            //   areaStyle: {

                            //     type: 'default'
                            //   }
                            // }
                        }






                    }],
                    // 使用刚指定的配置项和数据显示图表。

                };
                window.addEventListener("resize", function () {
                    myChart.resize();
                    myChart1.resize();
                });
                option && myChart.setOption(option);
                option1 && myChart1.setOption(option1);
            })
        },
        getEleDate() {
            getelectricityData().then(res => {
                this.tableDate = res.data
                this.emState = res.data[0].emState
                // console.log(res);
            })
        },
        // 接口默认时间
        getNowTime() {
            var date = new Date();
            var data1 = date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate();
            return data1
        },
        // 当前时间
        getTimeNow() {
            var date = new Date();
            var data1 = date.getFullYear() + '年' + this.addZero((date.getMonth() + 1)) + '月' + this.addZero(date.getDate()) + '日 ';
            var now = this.addZero(date.getHours()) + ':' + this.addZero(date.getMinutes()) + ':' + this.addZero(date.getSeconds());
            var week = ["日", "一", "二", "三", "四", "五", "六"][date.getDay()];
            var time = date.getFullYear() + '年' + this.addZero((date.getMonth() + 1)) + '月' + this.addZero(date.getDate()) + '日 ' + this.addZero(date.getHours()) + ':' + this.addZero(date.getMinutes()) + ':' + this.addZero(date.getSeconds()) + '' + '星期' + week;
            this.newTime = time;
            this.ndate = data1;
            this.nnow = now;
            this.nweek = week;
        },
        //根据自己的需求，看要不要在时间不大于10的时候在前面补0，如果需要直接this.addZero(date.getMinutes()),其它与之相同，如果不需要删掉addZero（）方法即可。
        //小于10的拼接上0字符串
        addZero(s) {
            return s < 10 ? ('0' + s) : s;
        },
        State() {
            // 电表电流
            getStateList(5).then(res => {
                // console.log(res);
                this.tableData1 = res.data

            }),
                // 总有功功率
                getStateList(7).then(res => {
                    // console.log(res);
                    this.tableData2 = res.data

                }),
                // 百叶箱光照
                getStateList(3).then(res => {
                    // console.log(res);
                    this.tableData3 = res.data

                }),
                // 86盒湿度
                getStateList(12).then(res => {
                    // console.log(res);
                    this.tableData4 = res.data

                }),
                //pt100温度
                getStateList(13).then(res => {
                    // console.log(res);
                    this.tableData5 = res.data

                })
        },
        tableRowClassName({ row, rowIndex, }) {
            //   console.log(row);
            if (row.deviceState != '正常') {
                return 'warning-row';
            } else {
                return '';
            }

        }

    }

}
</script>

<style lang="scss" scoped>
.block {
    float: right;
    margin-right: 150px;
    margin-top: 80px;
}

::v-deep.el-table .warning-row {
    // background: rgb(228, 46, 46); 
    color: red;

}

::v-deep.el-table .success-row {
    background: #73e436;
}
</style>